import React, { Component } from 'react';
import { connect } from 'dva';
import { Form, Input, Select, Button, Card, Row, Col, message } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

const FormItem = Form.Item;
const { Option } = Select;
// use permission as a parameter

@connect(({ dev, loading }) => ({
  dev,
  loading: loading.effects['dev/fetchBasicInfo'],
  submitting: loading.effects['dev/edit'],
}))
@Form.create()
export default class BasicForms extends Component {
  componentDidMount() {
    const { devId } = this.props.match.params;
    this.props.dispatch({
      type: 'dev/fetchBasicInfo',
      payload: { devId },
    });
  }

  goBack = () => {
    this.props.history.push(`/dashboard/devlist`);
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { devId } = values;
        const temp = { ...values };
        const jsonCont = JSON.stringify(temp);
        //console.log('values', jsonCont);
        this.props.dispatch({
          type: 'dev/edit',
          payload: { devId, jsonCont },
          callback: () => {
            message.success('编辑设备信息成功！');
            // this.props.history.push(`/dashboard/devlist`);
          },
        });
      }
    });
  };
  FormSelect = (name, label, options, initialValue = 0) => {
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };
    const { getFieldDecorator } = this.props.form;
    return (
      <FormItem {...formItemLayout} label={label}>
        {getFieldDecorator(name, {
          rules: [{ required: true, message: `请选择${label}!` }],
          initialValue,
        })(
          <Select placeholder={`请选择${label}!`} onChange={this.handleSelectChange}>
            {options.map((option, index) => (
              <Option value={index} key={index}>
                {option}
              </Option>
            ))}
          </Select>
        )}
      </FormItem>
    );
  };
  render() {
    const { submitting, form, dev } = this.props;
    const { getFieldDecorator } = form;
    const { devBasicInfo } = dev;
    let devIdt = '';
    let devNamet = '';
    let vehLicplateNumbert = '';
    let simIccidt = '';
    let simMsisdnt = '';
    let mainDrivert = '';
    let mdWorklicNumbert = '';
    let mdTelephoneNumbert = '';
    let viceDrivert = '';
    let vdWorklicNumbert = '';
    let vdTelephoneNumbert = '';
    let vehGroupt = '';
    let compNamet = '';
    let cityt = '';
    if (typeof devBasicInfo !== 'undefined') {
      devIdt = devBasicInfo.devId;
      devNamet = devBasicInfo.devName;
      vehLicplateNumbert = devBasicInfo.vehLicplateNumber;
      simIccidt = devBasicInfo.simIccid;
      simMsisdnt = devBasicInfo.simMsisdn;
      mainDrivert = devBasicInfo.mainDriver;
      mdWorklicNumbert = devBasicInfo.mdWorklicNumber;
      mdTelephoneNumbert = devBasicInfo.mdTelephoneNumber;
      viceDrivert = devBasicInfo.viceDriver;
      vdWorklicNumbert = devBasicInfo.vdWorklicNumber;
      vdTelephoneNumbert = devBasicInfo.vdTelephoneNumber;
      vehGroupt = devBasicInfo.vehGroup;
      compNamet = devBasicInfo.compName;
      cityt = devBasicInfo.city;
    }
    //    const dId = devBasicInfo.devId;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    return (
      <PageHeaderLayout title="编辑设备信息">
        <Card bordered={false}>
          <Form onSubmit={this.handleSubmit} style={{ marginTop: 8 }}>
            <Row>
              <Col span={8}>
                <FormItem labelCol={{ span: 12 }} wrapperCol={{ span: 8 }} label="设备ID：">
                  {getFieldDecorator('devId', {
                    initialValue: devIdt,
                    rules: [{ required: true, message: '请输入设备ID...' }],
                  })(<Input readOnly />)}
                </FormItem>
              </Col>
              <Col span={6}>
                <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 11 }} label="设备名称：">
                  {getFieldDecorator('devName', {
                    initialValue: devNamet,
                    rules: [{ required: true, message: '请输入设备名称!' }],
                  })(<Input placeholder="请输入" />)}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 8 }} label="车牌号：">
                  {getFieldDecorator('vehLicplateNumber', {
                    initialValue: vehLicplateNumbert,
                    // rules: [{ required: true, message: '请输入车牌号!' }],
                  })(<Input placeholder="请输入" />)}
                </FormItem>
              </Col>
            </Row>

            <Row>
              <Col span={8}>
                <FormItem labelCol={{ span: 12 }} wrapperCol={{ span: 8 }} label="SIM卡号：">
                  {getFieldDecorator('simIccid', {
                    initialValue: simIccidt,
                    //  rules: [{ required: true, message: '请输入设备名称...' }],
                  })(<Input placeholder="请输入" />)}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 8 }} label="SIM卡序列号：">
                  {getFieldDecorator('simMsisdn', {
                    initialValue: simMsisdnt,
                    //  rules: [{ required: true, message: '请输入SIM卡序列号!' }],
                  })(<Input placeholder="请输入" />)}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={8}>
                <FormItem labelCol={{ span: 12 }} wrapperCol={{ span: 8 }} label="主班司机：">
                  {getFieldDecorator('mainDriver', {
                    initialValue: mainDrivert,
                    //  rules: [{ required: true, message: '请输入主班司机...' }],
                  })(<Input placeholder="请输入" />)}
                </FormItem>
              </Col>
              <Col span={6}>
                <FormItem
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 11 }}
                  label="主班司机上岗证号："
                >
                  {getFieldDecorator('mdWorklicNumber', {
                    initialValue: mdWorklicNumbert,
                    //  rules: [{ required: true, message: '请输入主班司机上岗证号!' }],
                  })(<Input placeholder="请输入" />)}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 8 }}
                  label="主班司机电话号码："
                >
                  {getFieldDecorator('mdTelephoneNumber', {
                    initialValue: mdTelephoneNumbert,
                    //  rules: [{ required: true, message: '请输入主班司机电话号码!' }],
                  })(<Input placeholder="请输入" />)}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={8}>
                <FormItem labelCol={{ span: 12 }} wrapperCol={{ span: 8 }} label="副班司机：">
                  {getFieldDecorator('viceDriver', {
                    initialValue: viceDrivert,
                    //  rules: [{ required: true, message: '请输入副班司机...' }],
                  })(<Input placeholder="请输入" />)}
                </FormItem>
              </Col>
              <Col span={6}>
                <FormItem
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 11 }}
                  label="副班司机上岗证号："
                >
                  {getFieldDecorator('vdWorklicNumber', {
                    initialValue: vdWorklicNumbert,
                    //  rules: [{ required: true, message: '请输入副班司机上岗证号!' }],
                  })(<Input placeholder="请输入" />)}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 8 }}
                  label="副班司机电话号码："
                >
                  {getFieldDecorator('vdTelephoneNumber', {
                    initialValue: vdTelephoneNumbert,
                    //  rules: [{ required: true, message: '请输入副班司机电话号码!' }],
                  })(<Input placeholder="请输入" />)}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={8}>
                <FormItem labelCol={{ span: 12 }} wrapperCol={{ span: 8 }} label="车队名称：">
                  {getFieldDecorator('vehGroup', {
                    initialValue: vehGroupt,
                    //  rules: [{ required: true, message: '请输入车队名称...' }],
                  })(<Input placeholder="请输入" />)}
                </FormItem>
              </Col>
              <Col span={6}>
                <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 11 }} label="公司名称：">
                  {getFieldDecorator('compName', {
                    initialValue: compNamet,
                    //  rules: [{ required: true, message: '请输入公司名称!' }],
                  })(<Input placeholder="请输入" />)}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 8 }} label="所属城市：">
                  {getFieldDecorator('city', {
                    initialValue: cityt,
                    //  rules: [{ required: true, message: '请输入所属城市!' }],
                  })(<Input placeholder="请输入" />)}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={6} offset={6}>
                <Button type="primary" htmlType="submit" loading={submitting}>
                  提交
                </Button>
              </Col>
              <Col span={4}>
                <Button type="primary" onClick={this.goBack}>
                  返回
                </Button>
              </Col>
            </Row>
          </Form>
        </Card>
      </PageHeaderLayout>
    );
  }
}
